<template>
    <div class="Tools">
        <a-tooltip :arrow="false">
            <template #title>
                <span>撤销</span><br><span>Ctrl + Z</span>
            </template>
            <a-button type="text" :disabled="Undo" class="C-Icon"
                @click="() => StateEvent.HistoryEvent.Undo()">&#xe73b;</a-button>
        </a-tooltip>
        <a-tooltip :arrow="false">
            <template #title>
                <span>重做</span><br><span>Ctrl + Shift + Z</span>
            </template>
            <a-button type="text" :disabled="Redo" class="C-Icon"
                @click="() => StateEvent.HistoryEvent.Redo()">&#xe73c;</a-button>
        </a-tooltip>
        <a-divider type="vertical" />
        <a-tooltip :arrow="false">
            <template #title>
                <span>快捷键</span>
            </template>
            <a-button type="text" class="C-Icon" @click="open = true">&#xe766;</a-button>
        </a-tooltip>
    </div>
    <HotKey v-model:open="open" />
</template>

<script setup>
import { computed, inject, ref } from "vue";
import HotKey from "./HotKey.vue";
const StateEvent = inject('StateEvent');

const open = ref(false);

const Undo = computed(() => {
    return StateEvent.HistoryEvent.RecordsIndex.value <= 0;
})

const Redo = computed(() => {
    const Data = StateEvent.HistoryEvent;
    return Data.Records.length - Data.RecordsIndex.value <= 1
})




</script>

<style lang="less" scoped>
.Tools {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: flex-end;
}
</style>